底下介紹的是2020鐵人賽期內一開始的規劃和賽期內完成的文章。
使用者操作和Vim相關的系列文請詳見：[VSCode Extension]VSCodeVim:系列文章目錄

大家好，歡迎來到30天玩轉VS Code Extension之旅，我是韋恩，這三十天裡將由我來為大家介紹：

「 如何在VSCode裡，使用VSCode，開發VSCode的擴充套件 」(一個自己開發自己的概念!？)。

VSCode是個基於Electron與Typescript，由微軟開發的一款輕量跨平台的IDE(Integrated Development Environment)，具有豐富且龐大的生態系。最近幾年特別火紅，不僅僅由於它本身內建功能越來越多，也因為IDE軟體開源、功能容易擴充，備有完善且成熟的擴充套件API、文件以及相關教學，讓廣大的開發者更舒服的發揮想法，一同參與官方或非官方的擴充套件開發，以增強這款編輯器軟體，讓整個編輯器生態越來越好。

微軟的VSCode團隊也積極的持續更新、增強這套編輯器，每個月都在官方網站說明當前有什麼新的feature，並說明接下來的方向。因此幾年前的VSCode Extension文章，雖然仍極具參考價值，但顯然無法全盤介紹VSCode extension開發中的各種細微實用之處，筆者自己的文章也將會如此。

唯有微軟自家VSCode官方網站文件的說明，才會隨著時代的洪流與時俱進並且不斷更新。但，有多少人初窺程式語言框架的堂奧之時，即具備足以消化英文技術文件的能力與相關程式語言的基礎，自學成才並且深入其中呢？大部分人還是多少都會借助社群朋友們的心得文章與範例練習，之後才慢慢深入官方文件摸得一點訣竅的，筆者自己也是如此，而筆者也相信，這系列文章的價值也在於此。

關於本系列文章

這系列文章筆者規劃以如下順序介紹：

1. VSCode Extension架構簡介 (約1~2天)：介紹VSCode編輯器的架構、workspace設定與重點元件等等。實際上VSCode有各種api讓extension來配置定義元件和各種設定，但如果我們不熟悉或不清楚VSCode有這些功能與重點元件，要如何深入了解這些api的功能與使用情境呢？因此這些基礎知識對開發者來說是非常重要的，能避免我們快速接觸許多高深的api應用，但卻像在霧裡看花。

2. VSCode Extension快速上手 (1天)：使用腳手架快速建立VSCode Extension的開發專案，並帶領使用者熟悉最基礎的api使用。

3. VSCode Extension基礎元件與相關使用者設定 (約10~12天)：介紹VSCode的各種重點元件與使用者客製化設定。

4. VSCode Extension專案實戰 (約3~5天)：已經了解知識了，當然要動手做一個extension看看阿，這個單元會讓大家從0到一做出一個extension，敬請期待吧。

5. VSCode Extension 測試與發佈篇 (約2~3天)： 已經有一個extension了，要怎麼讓它運作穩定並發布給使用者使用呢，這就是本章要介紹的啦，我們將以travis ci為主介紹extension的測試與CI/CD。

6. VSCode Extension與第三方服務整合 (約1~2天)： 介紹如何讓使用在extension中對第三方服務進行登入驗證並整合其服務。

7. VSCode Snippet實戰 (約3~5天)：介紹VSCode snippet的開發，希望筆者到時有足夠時間再帶著大家開發一個豐富完整的專案喔。

8. VSCode 語言服務實戰 (約4~7天)：話說VSCode可是一個貨真價實的程式碼編輯器啊，當然提供了各種對程式語言擴充套件的支持啊，從code analysis到跳轉定義，我們全都做得到，甚至可以對自己創造的程式語言施展各種神奇的魔法呢，這部分網路上的相關教學較少，希望能順利給大家帶來精彩的內容。

9. 剩餘篇章 (視情況增簡)： 視情況介紹剩餘未提到的元件、功能或進一步深入專案開發。

10. 結尾與感謝 (1天): 總結三十天的文章與回顧，感謝一路上的朋友與不吝惜網路上分享心得的各路朋友們。

透過這三十天的分享，希望朋友們能夠快速開發至少一個小專案，走過軟體的開發、測試、CI/CD與發佈套件的一個流程，累積完整的軟體開發的週期的經驗。並能夠因為這系列文章與練習對js開發、ts的運用與nodejs都更為熟悉，並對自己使用的工具有著更深一層的了解。

預備知識

要開發好的VSCode Extension，至少要具備下面幾點：

1. Javascript知識與開發經驗
2. typescript知識與開發經驗
3. Nodejs相關知識與開發經驗

若想對Extension API有更深入的了解，第四點列出的基本知識則會相當有幫助：

4. 物件導向基本知識

前三點對於一個前端工程師來說，應該都多少都熟悉。但第四點就未必了，因為javascript的應用程式未必會使用物件導向的觀念開發，但對於extension api的開發來說，至少要些基本知識，不然較難入手這些api。實際上，整個VSCode編輯器的typescript開發都是基於深入的物件導向開發知識，VSCode專案甚至自己開發編輯器專用的依賴注入系統呢！這是物件導向的經典設計模式，雖然我們不需要全面使用物件導向開發extension，也不用再去實作底層的設計模式，但對於理解api跟使用來說，基本的知識，是會有很大的幫助的，希望大家都能在extension的開發中漸漸熟悉上面這幾點。

版本資訊

在這系列裡，筆者使用的VSCode版本是1.48.2(當前最新版本是1.49)。

若想體驗最新甚至實驗中的feature，官方提供了Insider版本讓大家搶先體驗，下載後使用也不會影響到開發專案用的正式版本，各路勇者，大膽的進入傳送門體驗吧 (傳送門)！。

參考文獻

這三十天裡，有份文件是我們可以不時去參考的，那就是官方的Extension文件裡的教學與說明 (傳送門)

另外，有個具備超級豐富VSCode官方範例的Github Repo，也是未來適合參考的 (傳送門)

看到這裡，可能會有人想問，為什麼不直接去看repo的範例就好了呢，還需要這系列文章的範例嗎？

ANS: 如果讀者是個老手，是可以自行閱讀文件開發的，但如果您仔細看過官方的sample程式，您會發現其十分的不簡單，有些完全不適合沒有基礎的人，sample code未必有足夠的說明。再者，此外筆者也希望讀者在一個情境下實際練習感受下開發出能解決使用者需求的程式的快感。這對於增強學習動機來講是很有幫助的。

我們不想要自己學會了1000種招式，卻沒有實際解決去過一個問題，對吧!

官方文件，有了基礎，有了情境跟動機後學習，跟追求速成一口氣讀完相比，感受不是差很多嗎？

好啦，前言就到這裡，之後還是會不定期更新最近的章節跟目錄，另外筆者想要設計一個還不錯的封面，預計30天完賽後會開始進行，我們明天見囉，掰掰~